import React, {FC, useState} from "react";
import styles from "./QuesCard.module.scss";
import {Button, Divider, message, Modal, Popconfirm, Space, Tag} from "antd";
import {
    CopyOutlined,
    DeleteOutlined,
    EditOutlined, ExclamationCircleFilled,
    LineChartOutlined, StarFilled,
    StarOutlined,
} from "@ant-design/icons";
import { Link, useNavigate } from "react-router-dom";
import { QUESTION_EDIT_PATH, QUESTION_STAT_PATH } from "../router";
import {useRequest} from "ahooks";
import {DuplicateQuestionService, UpdateQuestionService} from "../services/question";

type Prpos = {
  _id: string;
  isPublished: boolean;
  name: string;
  isStar: boolean;
  time: string;
  cont: number;
};
//通过fc的泛型进行组件的参数的传递
const {confirm} = Modal;
//QuesCard 分为两个部分，每个部分分为上下两个
const QuesCard: FC<Prpos> = (props: Prpos) => {
  const { _id, name, time, cont, isPublished, isStar } = props;
  const nav = useNavigate();
  const [isStarState,setIsStarState] = useState(isStar);

//网络请求，争对标星问卷
    const {run:changeStar,loading:changeStarLoading} = useRequest(
        async ()=>{
          const data = await  UpdateQuestionService(_id,{isStar:!isStarState})
        },{
            manual:true,
            onSuccess(){
                setIsStarState(!isStarState);
                message.success("跟新完成")
            }
        }
    );

  // function duplicate(){
  //     message.success("复制成功")
  // }
    //复制问卷逻辑实现
    const {loading:duplicateLoading,run:changeDuplicate}= useRequest(async ()=>{
     return await DuplicateQuestionService(_id);
    },{
        manual:true,
        onSuccess(result){
            message.success("复制成功");
            nav(`${QUESTION_EDIT_PATH}${result.id}`);
        }
    });



  function del(){
    confirm(
        {
          title:"确定删除问卷?",
          okText:"确定",
          cancelText:"取消",
          icon:<ExclamationCircleFilled/>,
            //这里是一个删除业务的函数
          onOk:delQuestCard
        }
    )
  }

  //但是只是修改了数据，如果要让数据不显示的话
    const [isDel,setIsDel]  =useState(false);
  //实现del的request的逻辑删除
    const  {loading:delQuestCardLoading,run:delQuestCard} =  useRequest(
        async ()=>{
          return await UpdateQuestionService(_id,{isDeleted:true});
        },{
            manual:true,
            onSuccess(){
                message.success("删除成功");
                setIsDel(true);
            }
        }
    )
if(isDel) {
    return null;
}
  return (
    <div className={styles.container}>
      <div className={styles.title}>
        {/*//这里最好是链接的形式*/}
        <div className={styles.left}>
          <Link
            to={
              isPublished
                ? QUESTION_STAT_PATH + `${_id}`
                : QUESTION_EDIT_PATH + `${_id}`
            }
          >
            {/*带有标星的给个特殊的记号*/}
            <Space>
              {isStarState && <StarOutlined style={{color:"red"}}></StarOutlined>}
              {name}
            </Space>

          </Link>
        </div>
        <div className={styles.right}>
         <Space>
           {isPublished ? <Tag color ="#87d068">已发布</Tag> :<Tag color="#f50">未发布</Tag>}
           {/*<span className={styles.sp}>答卷:{cont}</span>*/}
           <Tag  color={"gold"}>答卷:{cont}</Tag>
           {/*<span>{time}</span>*/}
           <Tag color={"orange"}>{time}</Tag>
         </Space>
        </div>
      </div>
      <Divider />
      <div className={styles.buttonContain}>
        <div className={styles.left}>
          <Space>
            <Button
              type="text"
              size={"small"}
              icon={<EditOutlined />}
              onClick={() => {
                nav(QUESTION_EDIT_PATH + `${_id}`);
              }}
            >
              编辑问卷
            </Button>
            <Button
              type="text"
              size={"small"}
              icon={<LineChartOutlined />}
              onClick={() => {
                nav(QUESTION_STAT_PATH + `${_id}`);
              }}
              disabled={!isPublished}
            >
              数据统计
            </Button>
          </Space>
        </div>
        <div className={styles.right}>
          <Space>
            {/*<Button type={"default"} icon={<StarOutlined style={{color:"blue"}} />} onClick={changeStar} disabled={changeStarLoading}>*/}
            {/*  {isStarState ? "取消标星" : "标星"}*/}
            {/*</Button>*/}
              <Button type={"default"} icon={isStarState ? <StarFilled style={{color:"blue"}}/>:<StarOutlined style={{color:"black"}} />} onClick={changeStar} disabled={changeStarLoading}>
                  {isStarState ? "取消标星" : "标星"}
              </Button>
              <Popconfirm
                title={"确定复制问卷?"}
                okText={"确定"}
                cancelText={"取消"}
                onConfirm={changeDuplicate}
            >
              <Button type={"default"} icon={<CopyOutlined />} disabled={duplicateLoading}>
                复制
              </Button>
            </Popconfirm>
            <Button type={"default"} icon={<DeleteOutlined />} onClick={del} disabled={delQuestCardLoading}>
              删除
            </Button>
          </Space>
        </div>
      </div>
    </div>
  );
};
export default QuesCard;
